<template>
  <el-container
    class="layout-container-demo"
    :style="{ minHeight: screenHeight + 'px' }"
  >
    <el-aside width="220px">
      <el-scrollbar>
        <div class="logo-image">
          <img
            src="/images/logo.png"
            style="width: 90px; height: 44px"
            alt=""
          />
        </div>
        <el-menu
          active-text-color="#409EFF"
          background-color="#304156"
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          text-color="#fff"
          unique-opened
          router
          @select="onSelectRoute"
        >
          <el-menu-item index="/index">
            <el-icon><icon-menu /></el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><setting /></el-icon>
              设备
            </template>
            <el-sub-menu index="4-1">
              <template #title>设备管理</template>
              <el-menu-item index="/device/system/smartConnector"
                >智联器管理</el-menu-item
              >
              <el-menu-item index="/device/system/electricMeter"
                >电表管理</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="4-2">
              <template #title>告警管理</template>
              <el-menu-item index="/device/alarm/AlarmCenter">告警中心</el-menu-item>
              <el-menu-item index="/device/alarm/AlarmSet">报警设置</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Connection /></el-icon>
              能源管理
            </template>
            <el-sub-menu index="2-1">
              <template #title>电能</template>
              <el-menu-item index="/energy/electric/realTimeData"
                >实时数据</el-menu-item
              >
              <el-menu-item index="2-1-2">日电量统计</el-menu-item>
              <el-menu-item index="2-1-3">月电量统计</el-menu-item>
              <el-menu-item index="2-1-4">年电量统计</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Document /></el-icon>
              账单管理
            </template>
            <el-sub-menu index="3-1">
              <template #title>电费账单</template>
              <el-menu-item index="3-1-1">账单查询</el-menu-item>
              <el-menu-item index="3-1-2">缴费记录</el-menu-item>
              <el-menu-item index="3-1-3">欠费记录</el-menu-item>
              <el-menu-item index="3-1-4">预付费余额</el-menu-item>
              <el-menu-item index="3-1-5">滞纳金查询</el-menu-item>
              <el-menu-item index="3-1-6">电费统计</el-menu-item>
              <el-menu-item index="3-1-7">电量统计</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3-2">
              <template #title>充值记录</template>
              <el-menu-item index="3-2-1">流水查询</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3-3">
              <template #title>提醒记录</template>
              <el-menu-item index="3-3-1">账单推送记录</el-menu-item>
              <el-menu-item index="3-3-2">充值提醒记录</el-menu-item>
              <el-menu-item index="3-3-3">余额不足提醒</el-menu-item>
              <el-menu-item index="3-3-4">缴费提醒记录</el-menu-item>
              <el-menu-item index="3-3-5">欠费提醒记录</el-menu-item>
              <el-menu-item index="3-3-6">其他提醒记录</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header
        style="font-size: 16px; display: flex; flex-direction: row-reverse"
      >
        <div style="padding: 10px">
          <el-dropdown>
            <img
              src="/images/avatar.jpg"
              alt=""
              style="width: 40px; height: 40px"
            />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>青澜实业</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="toolbar" style="padding: 0 10px; font-size: 14px">
          <el-icon size="20px"><Bell /></el-icon>
          <span style="margin-left: 5px">消息通知</span>
        </div>
        <div class="toolbar" style="padding: 0 10px; font-size: 14px">
          <el-icon size="20px"><Notebook /></el-icon>
          <span style="margin-left: 5px">操作文档</span>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar :height="screenHeight - 64">
          <div style="padding: 15px">
            <!-- 路由出口 -->
            <router-view></router-view>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import "normalize.css";
import { ref, onMounted, onUpdated, watch } from "vue";
import { useRoute } from "vue-router";
import {
  Menu as IconMenu,
  Message,
  Setting,
  Connection,
  DataBoard,
  Document,
  Bell,
  Notebook,
} from "@element-plus/icons-vue";
// 视口高度
const screenHeight = ref(0);
const router = useRoute();
const activeIndex = ref("");
const onSelectRoute = (e) => {
  console.log(e);
};
watch(
  router,
  (a) => {
    activeIndex.value = a.path;
  },
  { immediate: true }
);
watch(
  () => window.innerHeight,
  (a) => {
    console.log(a);
    screenHeight.value = a;
  },
  { immediate: true }
);
</script>

<style lang="css" scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #e6e8eb;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: #304156;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.logo-image {
  width: 100%;
  height: 48px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 2px;
}
.el-menu > li > ul > li {
  background: #1f2d3d;
}
.el-menu > li > ul > .el-menu-item:hover {
  background: rgb(38, 52, 69);
}
.toolbar {
  cursor: pointer;
  color: #303133;
}
.toolbar:hover {
  background: rgb(235.9, 245.3, 255);
  transition: 0.6s;
}
</style>
